<template>
  <div class="meas-container">
    <div>
      <el-button :icon="Search" plain type="primary" @click="openQuery">
        查询
      </el-button>
      <el-button :icon="Plus" plain type="primary" @click="toAdd">
        添加
      </el-button>
      <el-button :icon="Delete" plain type="warning" @click="toDelete">
        删除
      </el-button>
      <el-button :icon="Edit" plain type="primary" @click="toUpdate">
        修改
      </el-button>
    </div>
    <div style="height: 20px"></div>
    <el-row>
      <el-col :span="18">
        <el-table
          :data="state.measData"
          highlight-current-row="true"
          size="small"
          style="width: 100%"
          @current-change="handleCurrentChange"
        >
          <el-table-column label="序号" type="index" width="80" />
          <el-table-column label="单位编码" prop="measCode" width="550" />
          <el-table-column label="单位名称" prop="measName" width="570" />
        </el-table>
        <el-pagination
          background
          :current-page="paginationParams.pageNo"
          :layout="layout"
          :page-size="paginationParams.pageSize"
          :total="paginationParams.total"
          @current-change="handlePaginationCurrentChange"
          @size-change="handlePaginationSizeChange"
        />
      </el-col>
    </el-row>
    <QueryDialogVue ref="queryDialogRef" @query-callback="queryCallback" />
    <MeasModuleVue ref="measModuleRef" @success-callback="getMeasData" />
  </div>
</template>

<script setup>
  import { Plus, Delete, Edit, Search } from '@element-plus/icons-vue'
  import QueryDialogVue from './modules/queryDialog.vue'
  import MeasModuleVue from './modules/measModule.vue'
  import { getMeasdocPageApi, removeMeasdocApi } from '@/api/base/measdoc'
  import { localStorageConfig } from '@/config/localstorage.config'
  const $baseMessage = inject('$baseMessage')

  const queryDialogRef = ref()
  const measModuleRef = ref()
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const state = reactive({
    measData: [],
    meadocs: [],
    currentRow: {},
    queryInfo: {},
  })

  const openQuery = () => {
    queryDialogRef.value.openDialog()
  }
  const queryCallback = (query) => {
    state.queryInfo.measCode = query.measCode
    state.queryInfo.measName = query.measName
    getMeasData()
  }

  const toAdd = () => {
    measModuleRef.value.openDialog()
  }
  const toUpdate = () => {
    measModuleRef.value.openDialog(state.currentRow)
  }

  const toDelete = async () => {
    if (state.currentRow.pkMeasdoc) {
      ElMessageBox.confirm('确定要删除该计量单位吗?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const res = await removeMeasdocApi({
            pkMeasdoc: state.currentRow.pkMeasdoc,
          })
          if (res && String(res.code) === '2000') {
            $baseMessage(res && res.msg ? res.msg : '操作成功', 'success')
            getMeasData()
          } else {
            $baseMessage(res && res.msg ? res.msg : '操作失败,请重试', 'error')
          }
        })
        .catch(() => {})
    } else {
      $baseMessage('请选择需要删除的计量单位', 'warning')
    }
  }

  const paginationParams = reactive({
    pageNo: 1,
    pageSize: 20,
    total: 0,
  })
  const getMeasData = async () => {
    var params = {
      pageSize: paginationParams.pageSize,
      pageNum: paginationParams.pageNo,
      pkCorp: pkCorp,
      measCode: state.queryInfo.measCode,
      measName: state.queryInfo.measName,
    }
    const { code, data } = await getMeasdocPageApi(params)

    if (code === 2000) {
      state.measData = data.list
      paginationParams.total = data.total
    }
  }

  const handleCurrentChange = (row) => (state.currentRow = row)

  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNo = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNo = 1
  }

  watch(paginationParams, () => {
    getMeasData()
  })

  onMounted(async () => await getMeasData())
</script>

<style scoped></style>
